{% extends "forum/forum_home.html" %}
{% block page_link %}
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        #VotingOption div:hover {
            background: #f7f7f7;
        }
        .HistoricalVoting {
            width: 100%;height: 35px;line-height: 35px;padding-left: 3%;cursor: pointer;font-size: 14px;
        }
        .VotingActive {
            background: #cecece;
        }
        #flow_list div:hover {
            background: #f7f7f7;
        }
        .vot_but {
            width: 100px;letter-spacing: 6px;height: 30px;margin-top: 5px;background: #0d8ddb;border: #0d8ddb solid 1px;color: white;border-radius: 1px;text-align: center;
        }
        .VoteTitleActive {
            width: 80%;height: 35px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;vertical-align: top;
        }
        .VoteTitle {
            width: 100%;height: 35px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        }
    </style>
{% endblock %}
{% block right_content %}
    <div style="width: 100%;height: 100%;font-size: 0;">
        <div style="width: 20%;height: 100%;background: white;display: inline-block;vertical-align: top;">
            <div style="width: 100%;height: 35px;line-height: 35px;background: #2db7f5;color: white;font-size: 14px;">
                &nbsp;&nbsp;&nbsp;历史投票
            </div>
            <div id="flow_list" style="width: 100%;height: 95%;overflow: auto;">
                {% if objs|length %}
                    {% for flow in objs %}
                        {% if flow.flag %}
                            <div onclick="select_flow({{ flow.id }}, this)" class="HistoricalVoting VotingActive" title="{{ flow.vote_title }}">
                                {% if flow.new_flag %}
                                    <div class="VoteTitleActive">
                                        {{ flow.vote_title }}
                                    </div>
                                    <div style="width: 18%;height: 35px;display: inline-block;vertical-align: top;text-align: center;">
                                        <img src="../../static/public_file/images/新品.png" alt="" style="width: 20px;height: 20px;">
                                    </div>
                                {% else %}
                                    <div class="VoteTitleActive" style="width: 100%;">
                                        {{ flow.vote_title }}
                                    </div>
                                {% endif %}
                            </div>
                        {% else %}
                            <div onclick="select_flow({{ flow.id }}, this)" class="HistoricalVoting" title="{{ flow.vote_title }}">
                                {% if flow.new_flag %}
                                    <div class="VoteTitleActive">
                                        {{ flow.vote_title }}
                                    </div>
                                    <div style="width: 18%;height: 35px;display: inline-block;vertical-align: top;text-align: center;">
                                        <img src="../../static/public_file/images/新品.png" alt="" style="width: 20px;height: 20px;">
                                    </div>
                                {% else %}
                                    <div class="VoteTitle">
                                        {{ flow.vote_title }}
                                    </div>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <div style="width: 100%;height: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 50%;background: white;color: #cfcfcf;">
                        <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;margin-top: 30px;">
                        <p>暂无数据</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <div style="width: 79.7%;height: 100%;background: white;display: inline-block;vertical-align: top;margin-left: 2px;font-size: 14px;position: relative;">
            {% if end_timestamp != 'false' %}
                <div style="width: 70%;height: 150px;line-height: 150px;text-align: center;margin-left: 15%;">
                    <strong id="vote_title" style="font-size: 26px;letter-spacing: 2px;">{{ flow_obj.vote_title }}</strong>
                </div>
                <div style="width: 100%;height: 82%;overflow: auto;">
                    <div style="width: 70%;margin-left: 15%;padding-left: 2%;">
                        <div id="vote_content" style="width: 100%;padding-left: 1%;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ flow_obj.vote_content }}
                        </div>
                        <div id="VotingOption" style="width: 100%;margin-top: 15px;">
                            {% if voting_flag == "true" %}
                                {% if flow_obj.vote_type == 'radio' %}
                                    {% for foo in VotingOption %}
                                        <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                            <input type="radio" name="voting_option" value="{{ foo.id }}" class="voting_option_radio"> {{ foo.option }}
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    {% for foo in VotingOption %}
                                        <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                            <input type="checkbox" value="{{ foo.id }}" class="voting_option"> {{ foo.option }}
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            {% else %}
                                {% if flow_obj.vote_type == 'radio' %}
                                    {% for foo in VotingOption %}
                                        <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                            <input type="radio" name="voting_option" value="{{ foo.id }}" class="voting_option_radio" {% if option_obj == foo.option %}checked{% else %}disabled{% endif %}> {{ foo.option }}
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    {% for foo in VotingOption %}
                                        <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                            <input type="checkbox" value="{{ foo.id }}" class="voting_option" {% if option_obj == foo.option %}checked{% else %}disabled{% endif %}> {{ foo.option }}
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                        </div>
                        <div style="width: 100%;height: 40px;margin-top: 15px;">
                            <button id="ballot" onclick="flow_ballot({{ flow_obj.id }}, '{{ flow_obj.vote_type }}')" class="vot_but" {% if voting_flag == "false" %}style="display: none;"{% endif %}>投票</button>
                        </div>
                    </div>
                    <div style="width: 70%;margin-left: 15%;padding-left: 2%;{% if flow_obj.vote_viewable == "two" %}display: none;{% endif %}" id="echart_div">
                        <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;letter-spacing: 3px;color: #0d8ddb;background: #F5F5F5;">
                            <div style="float: left;">投票统计</div>
                        </div>
                        <div style="width: 100%;margin-top: 3px;text-align: center;">
                            <div id="container" style="width: 100%;height: 350px;background: #F5F5F5;display: inline-block;vertical-align: top;">

                            </div>
                        </div>
                    </div>
                </div>
                <div style="position: absolute;bottom: 0;left: 0;width: 100%;height: 80px;box-shadow: 5px 0 15px #cfcfcf;text-align: center;font-size: 16px;">
                    <div style="height: 80px;line-height: 80px;display: inline-block;vertical-align: top;">距投票结束剩余</div>
                    <div id="vot_day" style="width: 50px;height: 40px;border: #cfcfcf solid 1px;background: #cfcfcf;display: inline-block;vertical-align: top;margin-top: 20px;line-height: 40px;"></div>
                    <div style="height: 80px;line-height: 80px;display: inline-block;vertical-align: top;"> 天</div>
                    <div id="vot_hour" style="width: 50px;height: 40px;border: #cfcfcf solid 1px;background: #cfcfcf;display: inline-block;vertical-align: top;margin-top: 20px;line-height: 40px;"></div>
                    <div style="height: 80px;line-height: 80px;display: inline-block;vertical-align: top;"> 小时</div>
                    <div id="vot_minutes" style="width: 50px;height: 40px;border: #cfcfcf solid 1px;background: #cfcfcf;display: inline-block;vertical-align: top;margin-top: 20px;line-height: 40px;"></div>
                    <div style="height: 80px;line-height: 80px;display: inline-block;vertical-align: top;"> 分钟</div>
                    <div id="vot_seconds" style="width: 50px;height: 40px;border: #cfcfcf solid 1px;background: #cfcfcf;display: inline-block;vertical-align: top;margin-top: 20px;line-height: 40px;"></div>
                    <div style="height: 80px;line-height: 80px;display: inline-block;vertical-align: top;"> 秒</div>
                </div>
            {% else %}
                <div style="width: 100%;height: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 20%;background: white;color: #cfcfcf;">
                    <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;margin-top: 30px;">
                    <p>暂无数据</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("VotingManagement").className = "add-nav-active";
            interval = "";
            var end_timestamp = {{ end_timestamp }};
            if (end_timestamp) {
                var vote_viewable = "{{ flow_obj.vote_viewable }}";
                if (vote_viewable === "one") {
                    var legend_pie = {{ legend_pie | safe }};
                    left_div('{{ flow_obj.vote_title }}', legend_pie);
                }
                var countdown_flag = intervalTime(end_timestamp);
                if (countdown_flag) {
                    interval = setInterval(function () {
                        console.log("开始")
                        var aaa = intervalTime(end_timestamp)
                        if (!aaa) {
                            clearInterval(interval);
                        }
                    }, 1000);
                }
            }
        };

        function select_flow(flow_id, objs) {
            if (interval) {
                clearInterval(interval);
            }
            var form = new FormData();
            form.append('flow_id', flow_id);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/forum/VotingManagement.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            document.getElementById("vote_title").innerText = JsonDate["vote_title"];
                            document.getElementById("vote_content").innerHTML = "";
                            document.getElementById("vote_content").innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + JsonDate["vote_content"]
                            document.getElementById("VotingOption").innerHTML = "";

                            var countdown_flag = intervalTime(JsonDate["end_timestamp"]);
                            if (countdown_flag) {
                                interval = setInterval(function () {
                                    var bbb = intervalTime(JsonDate["end_timestamp"])
                                    if (!bbb) {
                                        clearInterval(interval);
                                    }
                                }, 1000);
                            }

                            if (JsonDate["vote_viewable"] === "two") {
                                document.getElementById("echart_div").style.display = "none";
                            }else {
                                document.getElementById("echart_div").style.display = "block";
                                left_div(JsonDate["vote_title"], JsonDate['legend_pie']);
                            }

                            var HistoricalList = document.getElementsByClassName("HistoricalVoting");
                            for (var tt=0; tt<HistoricalList.length; tt++) {
                                HistoricalList[tt].className = "HistoricalVoting";
                            }
                            objs.className = "HistoricalVoting VotingActive";

                            if (JsonDate["VotingFlag"] === "true") {
                                if (JsonDate["vote_type"] === 'radio') {
                                    for (var i=0; i<JsonDate["VotingOption"].length; i++) {
                                        var OptionHtml = `
                                            <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                                <input type="radio" value="`+JsonDate['VotingOption'][i]['id']+`" name="voting_option" class="voting_option_radio"> `+JsonDate['VotingOption'][i]['option']+`
                                            </div>
                                        `
                                        $("#VotingOption").append(OptionHtml)
                                    }
                                }else {
                                    for (var j=0; j<JsonDate["VotingOption"].length; j++) {
                                        OptionHtml = `
                                            <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                                <input type="checkbox" value="`+JsonDate['VotingOption'][j]['id']+`" class="voting_option_radio"> `+JsonDate['VotingOption'][j]['option']+`
                                            </div>
                                        `
                                        $("#VotingOption").append(OptionHtml)
                                    }
                                }
                                document.getElementById("ballot").style.display = "block";
                                document.getElementById("ballot").setAttribute("onclick", "flow_ballot("+JsonDate["id"]+", '"+JsonDate["vote_type"]+"')")
                            }else {
                                if (JsonDate["vote_type"] === 'radio') {
                                    for (var ii=0; ii<JsonDate["VotingOption"].length; ii++) {
                                        if (JsonDate["option_obj"] === JsonDate['VotingOption'][ii]['option']) {
                                            var input_status = "checked"
                                        }else {
                                            input_status = "disabled"
                                        }
                                        OptionHtml = `
                                            <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                                <input type="radio" value="`+JsonDate['VotingOption'][ii]['id']+`" name="voting_option" class="voting_option_radio" `+input_status+`> `+JsonDate['VotingOption'][ii]['option']+`
                                            </div>
                                        `
                                        $("#VotingOption").append(OptionHtml)
                                    }
                                }else {
                                    for (var jj=0; jj<JsonDate["VotingOption"].length; jj++) {
                                        if (JsonDate["option_obj"] === JsonDate['VotingOption'][ii]['option']) {
                                            input_status = "checked"
                                        }else {
                                            input_status = "disabled"
                                        }
                                        OptionHtml = `
                                            <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 1%;">
                                                <input type="checkbox" value="`+JsonDate['VotingOption'][jj]['id']+`" class="voting_option_radio" `+input_status+`> `+JsonDate['VotingOption'][jj]['option']+`
                                            </div>
                                        `
                                        $("#VotingOption").append(OptionHtml)
                                    }
                                }
                                document.getElementById("ballot").style.display = "none";
                            }

                        } else {
                            alert(JsonDate['message']);
                            document.getElementById("loading").style.display = "none";
                        }
                    }
                }
            };
        }

        function flow_ballot(flow_id, vote_type) {
            var select_obj = document.getElementsByClassName("voting_option_radio")
            var select_option = [];
            for (var i=0; i<select_obj.length; i++) {
                if (select_obj[i].checked) {
                    select_option.push(select_obj[i].value)
                }
            }

            var form = new FormData();
            form.append('select_option', JSON.stringify(select_option));
            form.append('flow_id', flow_id)
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/forum/select_flow", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        window.location.reload();
                    }
                }
            };
        }

        //计算两个时间之间的时间差 多少天时分秒
        function intervalTime(endTime) {
            var now_time = (Date.parse(new Date()))/1000;//计算当前时间戳 (毫秒级)

            var date3 =  (endTime- now_time)*1000; //时间差的毫秒数

            //计算出相差天数
            var days = Math.floor(date3 / (24 * 3600 * 1000));
            if(days < 0){
                document.getElementById('vot_day').innerText = 0;
                document.getElementById('vot_hour').innerText = 0;
                document.getElementById('vot_minutes').innerText = 0;
                document.getElementById('vot_seconds').innerText = 0;
                return false
            }

            //计算出小时数
            var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
            var hours = Math.floor(leave1 / (3600 * 1000));

            //计算相差分钟数
            var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
            var minutes = Math.floor(leave2 / (60 * 1000));

            //计算相差秒数
            var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
            var seconds = Math.round(leave3 / 1000);

            document.getElementById('vot_day').innerText = days;
            document.getElementById('vot_hour').innerText = hours;
            document.getElementById('vot_minutes').innerText = minutes;
            document.getElementById('vot_seconds').innerText = seconds;
            return true
        }

        function left_div(vote_title, legend_pie) {
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    {#orient: 'vertical',#}
                    itemGap: 30,
                    left: 'left'
                },
                series: [
                    {
                        name: vote_title,
                        type: 'pie',
                        center: ['50%', "65%"],
                        radius: '50%',
                        data: legend_pie,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }

                ]
            };
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
            window.addEventListener('resize', myChart.resize);
        }
    </script>
{% endblock %}